<template>
  <div>
    <my-head style="padding: 46px 0" title="电影" :back="true" :movie="true">
      <van-icon name="cross" size="16" class="icon" />
    </my-head>
    <div class="swbox">
      <van-swipe class="my-swiper" vertical :autoplay="1500">
        <van-swipe-item v-for="(l, i) in banners" :key="i">
          <img :src="l.imgUrl" alt="" class="homebanner" />
        </van-swipe-item>
      </van-swipe>
      <div class="city" v-if="city" @click="gotocity">
        <span>{{ city.name }}</span>
        <van-icon name="arrow-down" class="icons" />
      </div>
    </div>
    <van-tabs v-model="activeName">
      <van-tab title="正在热映" name="a">正在热映</van-tab>
      <van-tab title="即将热映" name="b">即将热映</van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      banners: [],
      pageNum: 1, //当前页码
      pageSize: 10, //每页总条数
      total:0, //总条数
      type:1, //1正在热映2，即将上映
    };
  },
  methods: {
    getmovelist() {
      this.$ajax.getMaiData(
        {
          cityId:this.city.cityId,
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          type:this.type,
        },
        {
          'X-Host': 'mall.film-ticket.film.list'
        }
      ).then(res=>{

      })
    },
    gotocity() {
      this.$router.push({ name: "city", query: { city: this.city.name } });
    },
  },
  mounted() {
    // 路由守卫
    //city
    if (this.city) {
      // 请求数据 请求轮播 数据
      this.getmovelist()
      this.$ajax
        .getMaiData(
          {
            type: 2,
            cityId: this.city.cityId,
          },
          {
            "X-Host": "mall.cfg.common-banner",
            "X-Client-Info":
              '{"a":"3000","ch":"1002","v":"5.0.4","e":"16370682535280542031347713","bc":"310100"}',
          }
        )
        .then((res) => {
          this.$nextTick(() => {
            this.banners = res.data;
          });
        });
    } else {
      this.$dialog
        .alert({
          title: "请选择城市",
          message: "尚未定位选择城市，请前往选择",
          theme: "round-button",
        })
        .then(() => {
          this.$router.push({ name: "city" });
        });
    }

    // this.$ajax.getMaiData({
    //   cityId: 420100,
    //   pageNum: 1,
    //   pageSize: 10,
    //   type: 1,
    // },{
    //   'X-Host':'mall.film-ticket.film.list'
    // }).then(res=>{
    //   console.log(res)
    // })
  },
};
</script>

<style lang="scss" scoped>
.swbox {
  width: 100%;
  height: 210px;
  position: relative;
  .city {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #9993;
    color: white;
    border: 1px solid #fff9;
    padding: 2px 5px;
    border-radius: 10px;
    font-size: 12px;
  }
  .my-swiper {
    width: 100%;
    height: 100%;
    .homebanner {
      width: 100%;
      height: 100%;
    }
  }
}
</style>